<template>
  <div>
    <h2 align="center">小黑子仓库统计信息</h2>
    <!-- 条形图和统计表格 -->
    <div style="display: flex; justify-content: space-between; align-items: flex-start; width: 98%; height: 400px;">
      <canvas ref="barChart" style="flex: 1; height: 100%;"></canvas>
      <el-table :data="formattedTableData" border style="width: 300px; margin-left: 20px;">
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="value" label="值"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import Chart from "chart.js/auto";
import {getData} from '@/api/cencat/Mydata.js';

export default {
  data() {
    return {
      formattedTableData: [], // 用于存储格式化后的表格数据
      barChart: null, // 图表对象
      barChartData: { // 初始化图表数据结构
        labels: [],
        datasets: [{
          label: '统计',
          data: [],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
          ],
          borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
          ],
          borderWidth: 1
        }]
      }
    };
  },
  created() {
    this.getData();
  },
  mounted() {
    this.renderBarChart();
  },
  methods: {
    getData() {
      getData()
        .then(response => {
          console.log("获取数据成功", response);
          this.formatData(response);
        })
        .catch(error => {
          console.error("获取数据失败", error);
          // 如果获取数据失败，可以初始化一些默认值或者显示错误信息
          this.formattedTableData = [
            { name: "客户数量", value: 0 },
            { name: "入库数量", value: 0 },
            { name: "货物数量", value: 0 },
            { name: "供应商数量", value: 0 },
            { name: "出库数量", value: 0 },
            { name: "仓库利用率", value: 0 }
          ];
          this.$message.error("获取数据失败");
        });
    },
    formatData(data) {
      if (!data) return;

      const keys = ["客户数量", "入库数量", "货物数量", "供应商数量", "出库数量", "仓库利用率"];
      this.formattedTableData = keys.map(key => ({
        name: key,
        value: data[key] || 0 // 默认值处理，避免出现 undefined
      }));

      // 处理操作记录单独展示
      if (data["操作记录"] && data["操作记录"].length > 0) {
        const latestRecord = data["操作记录"][0];
        this.formattedTableData.push({
          name: "最近的操作记录",
          value: `${latestRecord.record_person} 在 ${latestRecord.record_time.split('T')[0]} 进行了 ${latestRecord.type} 操作`
        });
      }

      // 更新图表数据
      this.updateBarChart();
    },
    renderBarChart() {
      const ctx = this.$refs.barChart.getContext('2d');
      this.barChart = new Chart(ctx, {
        type: 'bar',
        data: this.barChartData,
        options: {
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });
    },
    updateBarChart() {
      if (this.barChart) {
        this.barChartData.labels = this.formattedTableData.map(item => item.name);
        this.barChartData.datasets[0].data = this.formattedTableData.map(item => {
          if (typeof item.value === 'string' && item.value.includes('%')) {
            return parseFloat(item.value.replace('%', '')); // 处理百分比
          }
          return item.value;
        });
        this.barChart.update();
      }
    }
  }
};
</script>

<style>
/* 在这里添加你的样式 */
</style>
